<template>
  <div class="vpt-base-tpl-1003-wrapper">
    <header class="vpt-base-tpl-1003-header">
      {{ dataSource.title }}
    </header>
    <section class="vpt-base-tpl-1003-body">
      <div class="vpt-base-tpl-1003-content" v-for="(item, index) in dataSource.list" :key="index">
        <header class="title">{{ item.title }}</header>
        <section class="body">
          <div class="left">
            <em class="label">{{ item.label }} </em>
            <div class="value">{{ item.value }} {{ item.unit }}</div>
          </div>
          <div class="right-type-1" v-if="item.dataList.length>1">
            <div
              class="wrapper"
              v-for="(node, key) in item.dataList"
              :key="key"
            >
              <em class="label">{{ node.label }} </em>
              <div class="value-mode">{{ node.value }} {{ node.unit }}</div>
            </div>
          </div>
          <div class="right-type-2" v-else>
            <div
              class="wrapper"
              v-for="(node, key) in item.dataList"
              :key="key"
            >
              <em class="label">{{ node.label }} </em>
              <div class="value-mode">{{ node.value }} {{ node.unit }}</div>
            </div>
          </div>
        </section>
      </div>
    </section>
  </div>
</template>
<script setup>
const props = defineProps({
  dataSource: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>
